import { forwardRef, ForwardedRef } from 'react';
import { Tabs } from 'antd-mobile';
import SearchResultContent from './content';
import useConfigs, { IConfigs, ISearchResultMainRef } from '../../common/useConfigs';
import { getMessage } from '@inbiz/react';
const { Tab } = Tabs;
function SearchResultMain(props: IConfigs, ref: ForwardedRef<ISearchResultMainRef>) {
  const { showConfigs, searchEngineData, activeKey, $activeKey, refs } = useConfigs(props, ref);  

  return showConfigs?.length ? (
    showConfigs.length === 1 ? (
      <SearchResultContent
        option={showConfigs[0]}
        engineProps={props.engineProps}
        searchEngineData={searchEngineData[showConfigs[0]?.IndexName] || {}}
        ref={refs[showConfigs[0]?.IndexName]}
      />
    ) : (
      <Tabs className="indexNameTabs" activeKey={activeKey} onChange={$activeKey}>
        {showConfigs.map((item) => {
          return item.IndexName ? (
            <Tab
              key={item.IndexName}
              title={
                getMessage(
                  item.IndexDesc === 'document'
                    ? 'SearchResultEngine.document'
                    : item.configs?.[0].indexName,
                ) || item.configs?.[0]?.title
              }
            >
              <SearchResultContent
                option={item}
                engineProps={props.engineProps}
                searchEngineData={searchEngineData[item.IndexName] || {}}
                ref={refs[item.IndexName]}
              />
            </Tab>
          ) : null;
        })}
      </Tabs>
    )
  ) : null;
}
export default forwardRef(SearchResultMain);
